<template>
  <Card style="height: 84vh">
    <p slot="title">小票管理</p>
    <Button type="primary" @click="printReport">打印</Button>
    <Form
        ref="formInline"
        :model="formInline"
        inline
        :label-width="100"
    >
      <FormItem label="店名" prop="shop_name">
        <Input
            type="text"
            v-model="formInline.shop_name"
            placeholder="请输入店名"
        />
      </FormItem>
      <FormItem label="时间" prop="time">
        <DatePicker
            type="datetimerange"
            v-model="formInline.time"
            placement="bottom-end"
            placeholder="请选择时间"
            format="yyyy-MM-dd"
            @on-change="formInline.time=$event"
            style="width: 200px"
        ></DatePicker>
      </FormItem>
      <FormItem label="备注" prop="shop_address">
        <Input
            style="width: 300px"
            type="textarea" :autosize="{minRows: 2,maxRows: 5}"
            v-model="formInline.shop_address"
            placeholder="请输入店铺地址"
        />
      </FormItem>
    </Form>
    <Form
        ref="capsuleAttr"
        :model="capsuleAttr"
        :label-width="100"
        style="width: 100%;max-height: 300px;overflow-x:hidden; overflow-y:visible;"
        inline
    >
      <div
          v-for="(item, index) in capsuleAttr.shopList"
          :key="index"
      >
        <FormItem
            label="分店名："
            :prop="'shopList.' + index + '.branch_name'"
            :rules="{
              required: true,
              message: '分店名称不能为空',
              trigger: 'blur',
            }"
        >
          <Input v-model.trim="item.branch_name" placeholder="分店名"/>
        </FormItem>
        <FormItem label="营业员名：" :prop="'shopList.' + index + '.sales_name'"
                  :rules="{
              required: true,
              message: '营业员名不能为空',
              trigger: 'blur',
              type: 'string',
            }"
        >
          <Input v-model.trim="item.sales_name" placeholder="营业员名"/>
        </FormItem>
        <FormItem style="width: 20%" label="收银员名：" :prop="'shopList.' + index + '.cashier_name'"
                  :rules="{ required: true, message: '收银员名：不能为空', trigger: 'blur', }">
          <Input v-model.trim="item.cashier_name" placeholder="收银员名"/>
        </FormItem>
        <FormItem label="打票数量：" style="width: 20%" :prop="'shopList.' + index + '.tickert_number'"
                  :rules="{
              required: true,
              message: '数量不能为空',
              trigger: 'blur',
              type:'number'

            }">
          <InputNumber :max="100000" :min="0" v-model="item.tickert_number"></InputNumber>
        </FormItem>
      </div>

      <FormItem style="width: 100%;justify-content: center">
        <Button type="dashed" long @click="handleAttrAdd" icon="md-add">增加分店</Button>
      </FormItem>
    </Form>
    <Divider/>

    <Form
        ref="product"
        :model="goods"
        :label-width="100"
        inline
    >
      <div
          v-for="(item, index) in goods.list"
          :key="index"
      >
        <FormItem
            :label-width="110"
            label="主商品："
            :prop="'list.' + index + '.major_product'"
            :rules="{
              required: true,
              message: '主要商品不能为空',
              trigger: 'blur',
            }"
        >
          <Input v-model.trim="item.major_product" placeholder="主要商品"/>
        </FormItem>
        <FormItem
            label="货号："
            :prop="'list.' + index + '.item_no'"
            :rules="{
              required: true,
              message: '货号不能为空',
              trigger: 'blur',
            }"
        >
          <Input v-model.trim="item.item_no" placeholder="货号"/>
        </FormItem>
        <FormItem
            label="售价："
            style="width: 14%"
            :prop="'list.' + index + '.unit_price'"
            :rules="{
              required: true,
              message: '售价不能为空',
              trigger: 'blur',
               type:'number'
            }"
        >
          <InputNumber :max="100000" :min="0" v-model="item.unit_price" :step="1.2"></InputNumber>
        </FormItem>
        <FormItem
            label="数量："
            style="width: 14%"
            :prop="'list.' + index + '.number'"
            :rules="{
              required: true,
              message: '数量不能为空',
              trigger: 'blur',
              type:'number'

            }"
        >
          <InputNumber :max="100000" :min="0" v-model="item.number"></InputNumber>
        </FormItem>
        <FormItem
            style="width: 14%"
            label="金额："
            :prop="'list.' + index + '.price'"
            :rules="{
              required: true,
              message: '数量不能为空',
              trigger: 'blur',
              type:'number'
            }"
        >
          <!--          <Input v-model.trim="item.price" placeholder="金额"/>-->
          <InputNumber :max="100000" :min="0" v-model.trim="item.price" :step="1.2"></InputNumber>
        </FormItem>
        <FormItem
            :label-width="110"
            label="随机商品数："
            :prop="'list.' + index + '.goods_random_number'"
        >
          <InputNumber :max="100000" :min="0" v-model.trim="item.goods_random_number"></InputNumber>
        </FormItem>
      </div>
    </Form>
    <Form
        ref="product"
        :model="product"
        :label-width="100"
        style="width: 100%;height: 300px;overflow-x:hidden; overflow-y:visible;"
        inline
    >
      <div
          v-for="(item, index) in product.list"
          :key="index"
      >
        <FormItem
            :label-width="110"
            label="随机商品："
            :prop="'list.' + index + '.major_product'"
            :rules="{
              required: true,
              message: '主要商品不能为空',
              trigger: 'blur',
            }"
        >
          <Input v-model.trim="item.major_product" placeholder="主要商品"/>
        </FormItem>
        <FormItem
            label="货号："
            :prop="'list.' + index + '.item_no'"
            :rules="{
              required: true,
              message: '货号不能为空',
              trigger: 'blur',
            }"
        >
          <Input v-model.trim="item.item_no" placeholder="货号"/>
        </FormItem>
        <FormItem
            label="售价："
            style="width: 14%"
            :prop="'list.' + index + '.unit_price'"
            :rules="{
              required: true,
              message: '售价不能为空',
              trigger: 'blur',
               type:'number'
            }"
        >
          <InputNumber :max="100000" :min="0" v-model="item.unit_price" :step="1.2"></InputNumber>
        </FormItem>
        <FormItem
            label="数量："
            style="width: 14%"
            :prop="'list.' + index + '.number'"
            :rules="{
              required: true,
              message: '数量不能为空',
              trigger: 'blur',
              type:'number'

            }"
        >
          <InputNumber :max="100000" :min="0" v-model="item.number"></InputNumber>
        </FormItem>
        <FormItem
            style="width: 14%"
            label="金额："
            :prop="'list.' + index + '.price'"
            :rules="{
              required: true,
              message: '数量不能为空',
              trigger: 'blur',
              type:'number'
            }"
        >
          <InputNumber :max="100000" :min="0" v-model.trim="item.price" :step="1.2"></InputNumber>
        </FormItem>
      </div>
      <FormItem style="width: 100%;justify-content: center">
        <Button type="dashed" long @click="handleGodds" icon="md-add">增加商品</Button>
      </FormItem>
    </Form>
    <div class="tab_company_out" id="print_container" style="width: 100%;">
      <h3 style="text-align: center">{{ formInline.shop_name }}</h3>
      <div>
        <span>分店：</span>
        <span>{{ branch_name }}</span>
      </div>
      <div style="width: 50%;float: left">营业员：{{ sales_name }}</div>
      <div style="width: 50%;float: right">收营员：{{ cashier_name }}</div>
      <div style="width: 60%;float: left">NO： {{ code }}</div>
      <div style="width: 40%;float: right">{{ time }}</div>
      <div>------------------------------------</div>
      <div class="section4">
        <div>
          <table style="width: 100%;" id="productTable">
            <thead>
            <tr>
              <td width="60%">货号/品名</td>
              <td width="20%">单价</td>
              <td width="10%">数量</td>
              <td width="10%">小计</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in goodsObj" :key="index">
              <td>{{ item.item_no }} / {{ item.major_product }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.number }}</td>
              <td>{{ item.number * item.price }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>------------------------------------</div>
      <div>
        <div style="width: 60%;float: left">数量：{{ count }}</div>
        <div style="width: 40%;float: right">合计：{{ sum }}</div>
      </div>
      <div>
        <span>支付方式：微信</span>
      </div>
      <div>------------------------------------</div>
      <div>{{ this.formInline.shop_address }}</div>
      <!--      <div style="width: 60%;float: left">座机：0478-2389890；</div>-->
      <!--      <div style="width: 40%;float: right">手机：17604787277</div>-->
      <div>---------------------------------------------------------------------</div>
    </div>
  </Card>
</template>
<script>
import {getLodop} from "@/utils/LodopFunc";

let LODOP = getLodop()
export default {

  data() {
    return {
      branch_name: "",
      sales_name: "",
      cashier_name: "",
      formInline: {
        shop_name: "",
        time: [],
        shop_address: ""
      },
      capsuleAttr: {
        index: 1,
        shopList: [
          {
            branch_name: "",
            sales_name: "",
            cashier_name: "",
            tickert_number: 0, //属性ID
          },
        ],
      },
      product: {
        index: 1,
        list: [
          {
            major_product: "",
            item_no: null,
            unit_price: null,
            number: 0,
            price: null,
          }
        ]
      },
      goods: {
        index: 1,
        list: [
          {
            major_product: "",
            item_no: null,
            unit_price: null,
            number: 0,
            price: null,
            goods_random_number: 0
          }
        ]
      },
      time: "",
      code: "",
      goodsObj: []
    };
  },
  watch: {
    "branch_name": {
      handler(v) {
        console.log(1111, v)
      }
    }
  },
  methods: {
    handleAttrAdd() {
      this.capsuleAttr.index++;
      this.capsuleAttr.shopList.push({
        branch_name: "",
        sales_name: "",
        cashier_name: "",
        tickert_number: null
      })
    },
    handleGodds() {
      this.product.index++;
      this.product.list.push({
        major_product: "",
        item_no: null,
        unit_price: null,
        number: null,
        price: null,
        goods_random_number: null
      })
    },
    printReport() {
      LODOP = getLodop();


      // LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", '90%'); // 设置打印缩放

      // LODOP.PRINT(); //预览(预览打印无脚标)
      // LODOP.PREVIEW()
      this.$nextTick(() => {
        for (let i = 0; i < this.capsuleAttr.shopList.length; i++) {
          LODOP.PRINT_INIT("");
          // LODOP.newpage()
          this.branch_name = this.capsuleAttr.shopList[i].branch_name;
          this.cashier_name = this.capsuleAttr.shopList[i].cashier_name;
          this.sales_name = this.capsuleAttr.shopList[i].sales_name;
          let number = this.capsuleAttr.shopList[i].tickert_number
          this.$nextTick(() => {
            this.CreateOneFormPage()
          }, 500)
          let htmlStr = document.getElementById("print_container").innerHTML

          LODOP.SET_PRINT_STYLE("FontSize", 9);
          LODOP.SET_PRINT_PAGESIZE(3, 800, 45, "");
          LODOP.ADD_PRINT_HTM(10, 10, '100%', '70%', htmlStr)
          LODOP.PREVIEW()
          // LODOP.PRINT()
        }
      }, 3000)
    },
    CreateOneFormPage(number) {
      for (let i = 0; i < number; i++) {
        this.getCode();
        let time_list = this.getDays(this.formInline.time[0], this.formInline.time[1])
        let i = Math.floor(Math.random() * time_list.length);
        this.time = time_list[i]
        this.goodsObj = []
        let goods = this.goods.list[0].goods_random_number
        this.goodsObj.push(this.goods.list[0])
        for (let i = 0; i < goods; i++) {
          var index = Math.floor(Math.random() * this.product.list.length);
          this.goodsObj.push(this.product.list[index])
        }
      }

    },
    getCode() {
      var code = '';
      var codeLength = 9;
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
      for (var i = 0; i < codeLength; i++) {
        var index = Math.floor(Math.random() * 9);
        code += random[index];
      }
      this.code = code;
    },
    getDays(day1, day2) {
      // 获取入参字符串形式日期的Date型日期
      var d1 = day1.getDate();
      var d2 = day2.getDate();

      // 定义一天的毫秒数
      var dayMilliSeconds = 1000 * 60 * 60 * 24;
      // 获取输入日期的毫秒数
      var d1Ms = d1.getTime();
      var d2Ms = d2.getTime();

      // 定义返回值
      var ret = [];

      // 对日期毫秒数进行循环比较，直到d1Ms 大于等于 d2Ms 时退出循环
      // 每次循环结束，给d1Ms 增加一天
      for (d1Ms; d1Ms <= d2Ms; d1Ms += dayMilliSeconds) {
        // 如果ret为空，则无需添加","作为分隔符
        if (!ret) {
          // 将给的毫秒数转换为Date日期
          var day = new Date(d1Ms);
          // 获取其年月日形式的字符串
          ret = day.getYMD();
        } else {
          // 否则，给ret的每个字符日期间添加","作为分隔符
          var day = new Date(d1Ms);
          // ret = ret + ',' + day.getYMD();
          ret.push(day.getYMD())
        }
      }
      return ret; // 或可换为return ret;
    },
  },
  computed: {
    count: function () {
      let count = 0;
      for (let i = 0; i < this.goodsObj.length; i++) {
        count += parseInt(this.goodsObj[i].number)
      }
      return count;
    },
    sum: function () {
      let price = 0;
      for (let i = 0; i < this.goodsObj.length; i++) {
        price += parseFloat(this.goodsObj[i].number * this.goodsObj[i].price)
      }
      return price
    }
  },
};
</script>
<style>
.left {
  float: left;
}

.right {
  float: right;
}

.section4 {
}

.section4 .total label {
  display: block;
}

.section4 .other_fee {
  border-bottom: 1px solid #DADADA;
}
</style>
